/*table of contents
1) header: title and info/descboxes
2) middle: height chart and draggables
3) footer: credits
*/

html,body { 
    height:100%; 
    width: 100%;
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: 'tt lakes';
    src: url('TTLakesCondensed-Bold.woff') format('woff'),
         url('TTLakesCondensed-Bold.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

body{
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-color: #bebebe;
    overflow: hidden;
}

#outer{
	display:table;
	position:absolute;
	height:100%;
	width:100%;
}
#inner{
	display: table-cell;
	vertical-align:middle;
}

/*1) header: title and info/descboxes*/
#headerZone{
	display: -webkit-flex;
	display:flex;
	position:relative;
	margin-left:auto;
	margin-right:auto;
    margin-top:45px;
	margin-bottom:20px;
    width: 100%;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
}

#titleart{
	display:inline-flex;
	margin-left:auto;
	margin-right:auto;
	z-index:2;
}

#infobox1,#infobox2,#infobox3,#infobox4,#infobox5,#infobox6,#infobox7,#infobox8,#infobox9,#infobox10,#infobox11,#infobox12,#infobox13,#infobox14,#infobox15,#infobox16,#infobox17,#infobox18,#infobox19,#infobox20{
	display:absolute;
	z-index:1;
	display:none;
	bottom:0px;
    height: 147px;
	margin-left:6%;
}

#descbox1,#descbox2,#descbox3,#descbox4,#descbox5,#descbox6,#descbox7,#descbox8,#descbox9,#descbox10,#descbox11,#descbox12,#descbox13,#descbox14,#descbox15,#descbox16,#descbox17,#descbox18,#descbox19,#descbox20{
	display:absolute;
	z-index:1;
	display:none;
	bottom:0px;
    height: 147px;
	margin-right:6%;
}

#infobox1{
	visibility: hidden;
}

#descbox1{
	visibility:hidden;
}

/*2) middle: height chart and draggables*/
#dragZone{
	display: -webkit-flex;
	display:flex;
	position:relative;
	margin:auto;
	margin-top:0px;
	margin-bottom:0px;
	height: 428px;
	width:100%;
    background-image: url(BGchart.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 96% 100%;
}

#measure{
	display:inline-flex;
	z-index:0;
    width: 45px;
    margin-left:2%;
    margin-right: auto;
}

#measure2{
	display:inline-flex;
	z-index:0;
    width: 45px;
    margin-right: 2%;
}

.fade{
	transition: filter .0s ease-in-out;
	-moz-transition: filter .0s ease-in-out;
	-webkit-transition: filter .0s ease-in-out;
}

.fade:hover{
	-webkit-filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white) 
                    drop-shadow(-0px -2px 0 white);
            filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white) 
                    drop-shadow(-0px -2px 0 white);
}

.fade:active{
	-webkit-filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white) 
                    drop-shadow(-0px -2px 0 white);
            filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white) 
                    drop-shadow(-0px -2px 0 white);
}
    
.fade:focus{
	-webkit-filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white) 
                    drop-shadow(-0px -2px 0 white);
            filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white)
                    drop-shadow(-0px -2px 0 white);
}

/*Can't use the class for some reason so I gave every .fade img an extra ID so I can give them a better image resolution*/ 
/*images get displayed with pixel-width/2*/

#leaf {     width: 147px;}
#redyoung { width: 123px;}
#crys {     width: 126px;}
#gold {     width: 118px;}
#lyra {     width: 137px;}
#brendan {  width: 142px;}
#may {      width: 135px;}
#lucas {    width: 121px;}
#hikari {   width: 135px;}
#touko {    width: 125px;}
#touya {    width: 121px;}
#mei {      width: 144px;}
#kyohei {   width: 151px;}
#calem {    width: 139px;}
#serena {   width: 156px;}
#sun {      width: 118px;}
#moon {     width: 139px;}
#redadult { width: 145px;}
#victor {   width: 130px;}
#gloria {   width: 110px;}
#pika {     width: 143px;}

#img1,#img2,#img3,#img4,#img5,#img6,#img6,#img7,#img8,#img9,#img10,#img11,#img12,#img13,#img14,#img15,#img16,#img17,#img18,#img19,#img20,#img21 {
	position:absolute;
	bottom: 0px;
	z-index:1;
	max-width: 100%;
    width: 9%;
    min-width: 9%;
}

#img1{ left:0%; z-index:1; }
#img2{ left:6%; z-index:1; }
#img3{ left:11%; z-index:1; }
#img4{ left:16%; z-index:1; }
#img5{ left:21%; z-index:1; }
#img6{ left:29%; z-index:1; }
#img7{ left:26%; z-index:1; }
#img8{ left:36%; z-index:1; }
#img9{ left:40%; z-index:1; }
#img10{ left:43%; z-index:1; }
#img11{ left:48%; z-index:1; }
#img12{ left:53%; z-index:1; }
#img13{ left:59.5%; z-index:1; }
#img14{ left:63%; z-index:1; }
#img15{ left:69%; z-index:1; }
#img16{ left:73%; z-index:1; }
#img17{ left:76%; z-index:1; }
#img18{ left:80%; z-index:1; }
#img19{ left:83.5%; z-index:1; }
#img20{ left:90%; z-index:1; }
#img21{ left:46%; z-index:1000; }

/*3) footer: credits*/

p {
    font-family: 'tt lakes';
    color: black;
    font-weight:bold;
    font-size: 0.7em;
}

a:link {
    text-decoration: none;
    color: black;
}

a:visited {
    text-decoration: none;
    color: black;
}

a:hover {
    color: white;
}

#drag{
	display: -webkit-flex;
	display:flex;
	position:relative;
	margin-top:10px;
	height:40px;
    width: 100%;
    background-image: url(drag.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
}

#arrows{
	display:inline-flex;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
    height: 40px;
}

#footer {
    color: black;
    display: -webkit-flex;
	display:flex;
	position:;
	margin-left:auto;
	margin-right:auto;
    width: 100%;
}

#credits{
	display:inline-flex;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
    margin-top: 2%;
}

#disclaimer{
 display:inline-flex;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
    margin-top: 0;
    color: white;
}

#version {
    color: white;
    margin: 0;
    padding-right: 1%;
    padding-bottom: 4%;
    height: 0px;
    text-align: right;
    font-size: 1em;
}


/*MOBILE*/

@media only screen and (max-width: 900px) {

/*table of contents
1) header: title and info/descboxes
2) middle: height chart and draggables
3) footer: credits
*/
    
body{
    overflow: scroll;
}

#outer{
	display:table;
	position:absolute;
	height:100%;
	width:100%;


}
#inner{
	display: table-cell;
	vertical-align:middle;

}

/*1) header: title and info/descboxes*/
#headerZone{
	display: -webkit-flex;
	display:flex;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top: 20px;
	margin-bottom:20px;
	height: 147px;
	width:1400px;
}

#titleart{
	display:inline-flex;
	margin-left:auto;
	margin-right:auto;
	z-index:2;

}

#infobox1,#infobox2,#infobox3,#infobox4,#infobox5,#infobox6,#infobox7,#infobox8,#infobox9,#infobox10,#infobox11,#infobox12,#infobox13,#infobox14,#infobox15,#infobox16,#infobox17,#infobox18{
	display:absolute;
	z-index:1;
	display:none;
	bottom:0px;
	margin-left:6%;
}

#descbox1,#descbox2,#descbox3,#descbox4,#descbox5,#descbox6,#descbox7,#descbox8,#descbox9,#descbox10,#descbox11,#descbox12,#descbox13,#descbox14,#descbox15,#descbox16,#descbox17,#descbox18{
	display:absolute;
	z-index:1;
	display:none;
	bottom:0px;
	margin-right:6%;
}

#infobox1{
	visibility: hidden;
}

#descbox1{
	visibility:hidden;
}

/*2) middle: height chart and draggables*/
#dragZone{
	display: -webkit-flex;
	display:flex;
	position:relative;
	margin:auto;
	margin-top:0px;
	margin-bottom:0px;
	height: 428px;
	width:1400px;
}

#bg{
	display:inline-flex;
	margin-left:auto;
	margin-right:auto;
	z-index:0;
}

.fade{
	transition: filter .0s ease-in-out;
	-moz-transition: filter .0s ease-in-out;
	-webkit-transition: filter .0s ease-in-out;
}

.fade:hover{
	-webkit-filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white) 
                    drop-shadow(-0px -2px 0 white);
            filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white) 
                    drop-shadow(-0px -2px 0 white);
}

.fade:active{
	-webkit-filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white) 
                    drop-shadow(-0px -2px 0 white);
            filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white) 
                    drop-shadow(-0px -2px 0 white);
}
    
.fade:focus{
	-webkit-filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white) 
                    drop-shadow(-0px -2px 0 white);
            filter: drop-shadow(2px 0px 0 white) 
                    drop-shadow(0px 2px 0 white) 
                    drop-shadow(-2px -0px 0 white)
                    drop-shadow(-0px -2px 0 white);
}
#img1,#img2,#img3,#img4,#img5,#img6,#img6,#img7,#img8,#img9,#img10,#img11,#img12,#img13,#img14,#img15,#img16,#img17,#img18{
	position:absolute;
	bottom: 0px;
	z-index:1;
	max-width:100%;
}

#img1{ left:0%; z-index:1; }
#img2{ left:6%; z-index:1; }
#img3{ left:11%; z-index:1; }
#img4{ left:16%; z-index:1; }
#img5{ left:21%; z-index:1; }
#img6{ left:29%; z-index:1; }
#img7{ left:26%; z-index:1; }
#img8{ left:36%; z-index:1; }
#img9{ left:40%; z-index:1; }
#img10{ left:43%; z-index:1; }
#img11{ left:48%; z-index:1; }
#img12{ left:53%; z-index:1; }
#img13{ left:59.5%; z-index:1; }
#img14{ left:63%; z-index:1; }
#img15{ left:69%; z-index:1; }
#img16{ left:73%; z-index:1; }
#img17{ left:76%; z-index:1; }
#img18{ left:80%; z-index:1; }
#img19{ left:83.5%; z-index:1; }
#img20{ left:90%; z-index:1; }
#img21{ left:46%; z-index:1000; }

    
}